<template>
  <div id="Service" class="service-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-text">
          <h1 class="page-title">相关服务</h1>
          <p class="page-subtitle">前沿技术驱动业务创新，AI与云计算赋能企业数字化转型</p>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-layout">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="sidebar-content">
          <div class="sidebar-header">
            <h3>技术服务</h3>
          </div>
          <nav class="sidebar-nav">
            <button
              v-for="(service, index) in serviceList"
              :key="service.id"
              :class="['nav-item', { 'active': activeService === service.id }]"
              @click="setActiveService(service.id)"
            >
              <div class="nav-item-content">
                <span class="nav-title">{{ service.title }}</span>
                <span class="nav-subtitle">{{ service.eng_title }}</span>
              </div>
              <i class="glyphicon glyphicon-chevron-right nav-arrow"></i>
            </button>
          </nav>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-area">
        <div class="service-detail" v-if="currentService">
          <!-- 服务头部 -->
          <div class="service-hero">
            <div class="service-hero-content">
              <div class="service-badge">
                <span>{{ currentService.category }}</span>
              </div>
              <h2 class="service-title">{{ currentService.title }}</h2>
              <p class="service-subtitle">{{ currentService.description }}</p>
            </div>
            <div class="service-hero-image">
              <img :src="currentService.img" :alt="currentService.title" />
            </div>
          </div>

          <!-- 服务特点 -->
          <div class="service-features">
            <h3>服务特点</h3>
            <div class="features-grid">
              <div 
                v-for="feature in currentService.features" 
                :key="feature" 
                class="feature-item"
              >
                <i class="glyphicon glyphicon-ok feature-icon"></i>
                <span>{{ feature }}</span>
              </div>
            </div>
          </div>

          <!-- 服务优势 -->
          <div class="service-advantages" v-if="currentService.advantages">
            <h3>服务优势</h3>
            <div class="advantages-list">
              <div 
                v-for="advantage in currentService.advantages" 
                :key="advantage.title"
                class="advantage-card"
              >
                <div class="advantage-icon">
                  <i :class="advantage.icon"></i>
                </div>
                <div class="advantage-content">
                  <h4>{{ advantage.title }}</h4>
                  <p>{{ advantage.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 技术栈 -->
          <div class="service-tech" v-if="currentService.techStack">
            <h3>技术栈</h3>
            <div class="tech-tags">
              <span 
                v-for="tech in currentService.techStack" 
                :key="tech"
                class="tech-tag"
              >
                {{ tech }}
              </span>
            </div>
          </div>

          <!-- CTA区域 -->
          <div class="service-cta">
            <div class="cta-content">
              <h3>准备开始您的项目？</h3>
              <p>联系我们的专业团队，获取定制化解决方案</p>
              <div class="cta-buttons">
                <router-link to="/contactus" class="btn-primary">立即咨询</router-link>
                <a href="#" class="btn-secondary">了解更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="Service">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import WOW from 'wow.js'
import service1 from '@/assets/img/service1.jpg'
import service2 from '@/assets/img/service2.jpg'
import service3 from '@/assets/img/service3.jpg'
import service4 from '@/assets/img/service4.jpg'

const router = useRouter()
const activeService = ref('section-1')

const serviceList = [
  {
    id: 'section-1',
    title: '软件定制开发',
    eng_title: 'Custom Software Development',
    category: '定制开发',
    img: service1,
    description: '根据企业具体需求，打造完全符合业务流程的定制化软件解决方案，从需求分析到上线维护的全生命周期服务。',
    features: ['需求分析', '架构设计', '敏捷开发', '质量保证', '部署上线', '运维支持'],
    advantages: [
      {
        icon: 'glyphicon glyphicon-cog',
        title: '量身定制',
        description: '深度理解业务需求，设计最适合的技术架构和功能模块'
      },
      {
        icon: 'glyphicon glyphicon-time',
        title: '快速交付',
        description: '采用敏捷开发模式，分阶段交付，快速响应需求变化'
      },
      {
        icon: 'glyphicon glyphicon-certificate',
        title: '质量保障',
        description: '完善的测试体系和代码审查机制，确保交付质量'
      }
    ],
    techStack: ['Vue.js', 'React', 'Node.js', 'Python', 'Java', 'MySQL', 'MongoDB', 'Redis']
  },
  {
    id: 'section-2',
    title: 'AI智能解决方案',
    eng_title: 'AI Intelligence Solutions',
    category: '人工智能',
    img: service2,
    description: '基于先进的机器学习和深度学习技术，为企业提供智能化解决方案，包括自然语言处理、计算机视觉、智能推荐等AI应用。',
    features: ['机器学习建模', '深度学习算法', '自然语言处理', '计算机视觉', '智能推荐系统', 'AI模型部署'],
    advantages: [
      {
        icon: 'glyphicon glyphicon-flash',
        title: '智能化升级',
        description: '利用AI技术提升业务效率，实现智能化决策和自动化处理'
      },
      {
        icon: 'glyphicon glyphicon-stats',
        title: '数据驱动',
        description: '基于大数据分析，提供精准的预测和个性化服务'
      },
      {
        icon: 'glyphicon glyphicon-certificate',
        title: '前沿技术',
        description: '采用最新的AI算法和框架，确保技术领先性'
      }
    ],
    techStack: ['Python', 'TensorFlow', 'PyTorch', 'OpenCV', 'NLP', 'Transformer', 'BERT', 'GPT']
  },
  {
    id: 'section-3',
    title: '大数据分析与挖掘',
    eng_title: 'Big Data Analytics & Mining',
    category: '数据科学',
    img: service3,
    description: '构建企业级大数据平台，提供数据收集、存储、处理、分析的完整解决方案，挖掘数据价值，驱动业务增长。',
    features: ['数据采集整合', '数据仓库建设', '实时数据处理', '可视化分析', '预测建模', '商业智能'],
    advantages: [
      {
        icon: 'glyphicon glyphicon-stats',
        title: '洞察业务',
        description: '通过数据分析发现业务趋势，为决策提供科学依据'
      },
      {
        icon: 'glyphicon glyphicon-dashboard',
        title: '实时监控',
        description: '构建实时数据监控体系，及时发现问题和机会'
      },
      {
        icon: 'glyphicon glyphicon-search',
        title: '价值挖掘',
        description: '深度挖掘数据价值，发现隐藏的商业机会'
      }
    ],
    techStack: ['Hadoop', 'Spark', 'Kafka', 'Elasticsearch', 'Tableau', 'Python', 'R', 'ClickHouse']
  },
  {
    id: 'section-4',
    title: '云计算与DevOps服务',
    eng_title: 'Cloud Computing & DevOps',
    category: '云服务',
    img: service4,
    description: '提供完整的云计算解决方案和DevOps服务，包括云架构设计、容器化部署、CI/CD流水线、运维自动化等现代化技术服务。',
    features: ['云架构设计', '容器化部署', 'CI/CD流水线', '监控告警', '自动化运维', '安全防护'],
    advantages: [
      {
        icon: 'glyphicon glyphicon-cloud',
        title: '弹性扩展',
        description: '基于云原生技术，实现应用的弹性伸缩和高可用性'
      },
      {
        icon: 'glyphicon glyphicon-refresh',
        title: '持续交付',
        description: '构建完善的CI/CD流水线，实现代码的持续集成和部署'
      },
      {
        icon: 'glyphicon glyphicon-shield',
        title: '安全可靠',
        description: '完善的安全防护体系和灾备机制，保障系统稳定运行'
      }
    ],
    techStack: ['Docker', 'Kubernetes', 'Jenkins', 'GitLab CI', 'Prometheus', 'AWS', '阿里云', '腾讯云']
  }
]

const currentService = computed(() => {
  return serviceList.find(service => service.id === activeService.value)
})

function setActiveService(serviceId) {
  activeService.value = serviceId
}

onMounted(() => {
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
  })
  wow.init()
})
</script>
<style scoped>
/* 苹果风格服务页面 */
.service-page {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  background: #ffffff;
  color: #1d1d1f;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%);
  padding: 80px 0 60px;
  text-align: center;
  color: white;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.page-subtitle {
  font-size: 21px;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0;
}

/* 主要布局 */
.main-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* 左侧导航栏 */
.sidebar {
  background: #f5f5f7;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 70px;
  height: fit-content;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

.sidebar-content {
  padding: 40px 0;
}

.sidebar-header {
  padding: 0 32px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.sidebar-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  letter-spacing: -0.01em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: left;
  width: 100%;
}

.nav-item:hover {
  background: rgba(0, 113, 227, 0.04);
  padding-left: 40px;
}

.nav-item.active {
  background: rgba(0, 113, 227, 0.08);
  border-right: 3px solid #0071e3;
}

.nav-item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-title {
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}

.nav-subtitle {
  font-size: 13px;
  color: #86868b;
  font-weight: 400;
}

.nav-arrow {
  font-size: 12px;
  color: #86868b;
  transition: all 0.2s ease;
}

.nav-item.active .nav-arrow {
  color: #0071e3;
  transform: translateX(4px);
}

/* 右侧内容区域 */
.content-area {
  background: #ffffff;
  overflow-y: auto;
}

.service-detail {
  padding: 60px;
}

/* 服务头部 */
.service-hero {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.service-hero-content {
  max-width: 500px;
}

.service-badge {
  margin-bottom: 20px;
}

.service-badge span {
  display: inline-block;
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.service-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.service-subtitle {
  font-size: 19px;
  font-weight: 400;
  color: #86868b;
  line-height: 1.47;
  letter-spacing: -0.01em;
  margin: 0;
}

.service-hero-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-hero-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* 服务特点 */
.service-features {
  margin-bottom: 60px;
}

.service-features h3 {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 32px 0;
  letter-spacing: -0.01em;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #f5f5f7;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #1d1d1f;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: #e8e8ed;
  transform: translateY(-2px);
}

.feature-icon {
  color: #30d158;
  font-size: 14px;
  font-weight: 600;
}

/* 服务优势 */
.service-advantages {
  margin-bottom: 60px;
}

.service-advantages h3 {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 32px 0;
  letter-spacing: -0.01em;
}

.advantages-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.advantage-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 32px;
  background: #f5f5f7;
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.advantage-card:hover {
  background: #e8e8ed;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.advantage-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0071e3, #005bb5);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.advantage-icon i {
  font-size: 20px;
  color: #ffffff;
}

.advantage-content h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.advantage-content p {
  font-size: 15px;
  color: #86868b;
  line-height: 1.5;
  margin: 0;
}

/* 技术栈 */
.service-tech {
  margin-bottom: 60px;
}

.service-tech h3 {
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 32px 0;
  letter-spacing: -0.01em;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-tag {
  padding: 10px 16px;
  background: rgba(0, 113, 227, 0.06);
  color: #0071e3;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all 0.3s ease;
}

.tech-tag:hover {
  background: rgba(0, 113, 227, 0.1);
  transform: translateY(-2px);
}

/* CTA区域 */
.service-cta {
  background: #f5f5f7;
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
}

.cta-content h3 {
  font-size: 32px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

.cta-content p {
  font-size: 19px;
  color: #86868b;
  margin: 0 0 32px 0;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 16px 32px;
  font-size: 17px;
  font-weight: 400;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: -0.01em;
  min-width: 140px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: #0071e3;
  color: #ffffff;
  border: 2px solid #0071e3;
}

.btn-primary:hover {
  background: #0077ed;
  border-color: #0077ed;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.4);
  text-decoration: none;
  color: #ffffff;
}

.btn-secondary {
  background: transparent;
  color: #0071e3;
  border: 2px solid rgba(0, 113, 227, 0.8);
}

.btn-secondary:hover {
  background: rgba(0, 113, 227, 0.1);
  color: #0077ed;
  border-color: #0071e3;
  transform: translateY(-2px);
  text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  .sidebar-content {
    padding: 20px 0;
  }
  
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding: 0 20px;
  }
  
  .nav-item {
    min-width: 200px;
    border-bottom: none;
    border-radius: 12px;
    margin: 0;
  }
  
  .nav-item.active {
    border-right: none;
    border: 2px solid #0071e3;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 60px 0 40px;
  }
  
  .service-detail {
    padding: 40px 20px;
  }
  
  .service-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 60px;
  }
  
  .service-hero-image {
    order: -1;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .advantages-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .advantage-card {
    padding: 24px;
  }
  
  .service-cta {
    padding: 40px 24px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 280px;
  }
  
  .sidebar-nav {
    flex-direction: column;
  }
  
  .nav-item {
    min-width: auto;
    margin: 0 20px;
  }
}
</style>

